<template>
  <span class="count-down">
    <i>{{content}}</i>
  </span>
</template>
<script>
  export default {
    data() {
      return {
        content:''
      }
    },
    props:{
      startTime:{
        type: String,
        default :''
      },
      endTime:{
        type: String,
        default :''
      },
      callback : {
            type : Function,
            default :''
        }
    },
    mounted () {
      this.countdowm(this.startTime,this.endTime)
    },
    methods: {
      countdowm(startTime,endTime){
        const _this = this;
        var _time = "";
        var x = '';
        if(startTime == 0){
          x = endTime
        }else{
          x = startTime
        };
        let interval = setInterval(function() {
          _time = "";
          let h = Math.floor(x / 60 / 60);
          let m = Math.floor((x - h * 60 * 60) / 60);
          let s = Math.floor((x - h * 60 * 60 - m * 60));
          let d = parseInt(h/24);
          if(d>0 && h>24){
            _time = _time+ d+"天"
          }
          if(h>0){
            _time = _time+ h+"时"
          }
          if(m>0){
            _time = _time+ m+"分"
          }
          _time = _time+ s+"秒"
          _this.content = _time;
          x--;
          if (x < 0){
            if(_this._callback){
              _this._callback();
            };
            clearInterval(interval);
            return;
          }
        }, 1000);
      },
      _callback(){
                if(this.callback && this.callback instanceof Function){
                     this.callback(...this);
                 }
            }
    }
  }
</script>